<template>
  <Field :name="filed" class="!p-0 form-item" :rules="rules" :value="value">
    <template #input>
      <div class="filed">
        <div class="filed_label">
          <span>{{ label }}</span>
          <slot name="label-right"></slot>
        </div>
        <Cell class="!p-0 items-center" @click="$emit('click')">
          <div
            slot="title"
            class="filed_value"
            :class="value ? '' : 'placehoder'"
          >
            <template v-if="$slots.default">
              <slot></slot>
            </template>
            <template v-else>
              {{ value ? value : placehoder }}
            </template>
          </div>
          <template #right-icon>
            <template v-if="$slots.icon">
              <slot name="icon"></slot>
            </template>
            <template v-else>
              <Icon v-if="showArrow" :name="ArrowRightIcon" />
            </template>
          </template>
        </Cell>
      </div>
    </template>
  </Field>
</template>

<script>
/**
 * slot
 *  default
 *  icon
 */
import { Field, Cell, Icon } from "vant";
import ArrowRightIcon from "@/assets/icon/arrow-right.png";
export default {
  props: {
    // 校验的字段
    filed: {
      type: String,
    },
    // 标签
    label: {
      type: String,
    },
    // 字段的值
    value: {
      type: [String, Number],
      default: "",
    },
    // 占位文字
    placehoder: {
      type: String,
      default: "请选择",
    },
    // 显示箭头（为自定义icon时有效）
    showArrow: {
      type: Boolean,
      default: true,
    },
    // 校验规则
    rules: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    Field,
    Cell,
    Icon,
  },
  data() {
    return {
      ArrowRightIcon,
    };
  },
};
</script>

<style lang="scss" scoped>
.form-item {
  &.van-cell {
    &:after {
      left: 0;
      right: 0;
    }
  }
  &.van-field--error {
    .filed_label {
      // color: red !important;
    }
  }
  .filed {
    @apply flex-1 px-12px py-16px border-b border-solid;
    &:last-child {
      @apply border-none;
    }
    .filed_label {
      @apply text-12px font-400 mb-10px flex items-center justify-between;
      color: #5b7fb5;
    }
    .filed_value {
      @apply text-14px font-500 leading-[var(--leading)];
      color: #333333;
      &.placehoder {
        @apply font-400;
        color: #999999;
      }
      ::v-deep {
        .van-field__control {
          @apply text-14px font-500 leading-[var(--leading)];
          color: #333333;
          &::placeholder {
            @apply font-400;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
